<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>删除图标示例</title><style type="text/css">.img-wrap { position: relative; display: inline-block; border: 1px red solid; font-size: 0;}.img-wrap .close { position: absolute; top: 2px; right: 2px; z-index: 100; background-color: #FFF; padding: 5px 2px 2px; color: #000; font-weight: bold; cursor: pointer; opacity: .2; text-align: center; font-size: 22px; line-height: 10px; border-radius: 50%;}.img-wrap:hover .close { opacity: 1;}</style></head> <body><div class="img-wrap"> <span class="close">×</span> <img src="http://lorempixel.com/200/200" data-id="123"></div> <div class="img-wrap"> <span class="close">×</span> <img src="http://lorempixel.com/100/80" data-id="103"></div></body><script src="https://www.5t6t.com/skin/js/jquery-min.js" type="text/javascript"></script><script type="text/javascript">$('.img-wrap .close').on('click', function() { var id = $(this).closest('.img-wrap').find('img').data('id'); alert('remove picture: ' id);});</script></html>
评论